<template>
    <div class="container mx-auto px-4 py-8">
      <!-- 顶部筛选栏 -->
      <div class="mb-8 flex flex-col md:flex-row gap-4 items-center justify-between">
        <h1 class="text-3xl font-bold text-gray-900">产品中心</h1>
        
        <div class="flex gap-3 w-full md:w-auto">
          <UInput 
            v-model="searchQuery"
            placeholder="搜索产品..." 
            icon="i-heroicons-magnifying-glass"
            class="flex-1"
          />
          <USelect
            v-model="selectedCategory"
            :options="categories"
            placeholder="全部分类"
            class="min-w-[150px]"
          />
        </div>
      </div>
  
      <!-- 产品列表 -->
      <div v-if="pending" class="grid place-items-center h-64">
        <USkeleton class="h-12 w-12 rounded-full" />
        <span class="mt-2 text-gray-500">加载中...</span>
      </div>
  
      <div v-else-if="error" class="text-center py-10">
        <UIcon name="i-heroicons-exclamation-triangle" class="text-red-500 text-4xl mx-auto" />
        <p class="mt-4 text-red-500">加载失败: {{ error.message }}</p>
        <UButton 
          label="重新加载" 
          color="red" 
          variant="outline" 
          @click="refresh"
          class="mt-4"
        />
      </div>
  
      <div v-else>
        <!-- 产品网格 -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          <ProductCard 
            v-for="product in filteredProducts"
            :key="product.id"
            :product="product"
            @click="navigateTo(`/products/${product.slug}`)"
          />
        </div>
  
        <!-- 分页 -->
        <div class="mt-8 flex justify-center" v-if="products.length > 0">
          <UPagination 
            v-model="page"
            :page-count="pageSize"
            :total="totalProducts"
            show-last
            show-first
          />
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  // 导入Nuxt自动生成的API类型
  import type { Product } from '~/types'
  import { useProducts } from '~/composables/useProducts1'
  // 定义分页参数
const page = ref(1)
const pageSize = 10

// 获取产品数据
const { data, pending, error, refresh } = await useLazyAsyncData(
  'products',
  () => useProducts(page.value, pageSize), // 调用封装的 useProducts 方法
  {
    watch: [page], // 当 page 改变时，重新请求数据
  }
)

// 当 page 改变时，自动触发刷新
watch(page, async (newPage) => {
  await refresh()
})
  
  // 计算属性
  const products = computed(() => data.value?.products || [])
  const totalProducts = computed(() => data.value?.total || 0)
  const categories = computed(() => [
    { value: 'all', label: '全部分类' },
    ...new Set(products.value.map(p => p.category))
  ])
  
  // 筛选逻辑
  const filteredProducts = computed(() => {
    return products.value.filter(product => {
      const matchesSearch = product.name.toLowerCase().includes(searchQuery.value.toLowerCase()) || 
                           product.description.toLowerCase().includes(searchQuery.value.toLowerCase())
      const matchesCategory = selectedCategory.value === 'all' || 
                             product.category === selectedCategory.value
      return matchesSearch && matchesCategory
    })
  })
  
  // SEO配置
  useHead({
    title: '产品中心',
    meta: [
      { name: 'description', content: '探索我们的优质产品系列' }
    ]
  })
  </script>
  
  <style scoped>
  /* 自定义过渡效果 */
  .product-enter-active,
  .product-leave-active {
    transition: all 0.3s ease;
  }
  .product-enter-from,
  .product-leave-to {
    opacity: 0;
    transform: translateY(10px);
  }
  </style>